<template>
  <div id="container"></div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader'
import bus from "@/bus/bus";

window._AMapSecurityConfig = {
  securityJsCode: '6f3a1cec907f64cace985ef97d595cb8'
}
export default {
  data() {
    return {
      map: null,
      autoOptions: {
        input: ''
      },
      autoComplete: null
    }
  },
  created() {
    bus.$on('shareUserInput', (val) => {
      this.autoOptions.input = val.inputId
    })
  },
  methods: {
    initMap() {
      AMapLoader.load({
        key: '36a3fd5b40f0e650509ffc85f7248c9d', // 申请好的Web端开发者Key，首次调用 load 时必填
        version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        plugins: ['AMap.ToolBar', 'AMap.Scale', 'AMap.HawkEye', 'AMap.MapType', 'AMap.Geolocation', 'AMap.AutoComplete']
      }).then(AMap => {
        this.map = new AMap.Map('container', {
          //设置地图容器id
          viewMode: '3D', //是否为3D地图模式
          zoom: 10, //初始化地图级别
          center: [121.473667, 31.230525] //初始化地图中心点位置
        })
        // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
        this.map.addControl(new AMap.ToolBar())
        // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
        this.map.addControl(new AMap.Scale())
        // 在图面添加鹰眼控件，在地图右下角显示地图的缩略图
        this.map.addControl(new AMap.HawkEye({isOpen: true}))
        // this.map.addControl(new AMap.HawkEye())
        // 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
        this.map.addControl(new AMap.MapType())
        // 在图面添加定位控件，用来获取和展示用户主机所在的经纬度位置
        this.map.addControl(new AMap.Geolocation())
        // 在图面添加自动补全控件
        this.autoComplete = new AMap.AutoComplete(this.autoOptions)
      }).catch(e => {
        console.log(e)
      })
    }
  },
  mounted() {
    this.initMap()
  }
}
</script>

<style lang="less" scoped>
#container {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 100%;
}
</style>